<template>
  <div>
    <Return2></Return2>
    <div class="add" @click="add">加入购物车</div>
  </div>
</template>

<script>
import Return2 from "../components/Return2"
import { getClassDetail} from "../api/details";
import { Toast } from "vant";
import Vue from "vue";
Vue.use(Toast);
export default {
  data() {
    return {
      commodity: {},
      flag: true,
    };
  },
  mounted() {
    getClassDetail(this.$route.params.id)
      .then((res) => {
        this.commodity = res.data;
      })
  },
  components:{
      Return2,
    },
  methods: {
    
    add() {
      if (this.$store.state.car.carList.length != 0) {
        this.$store.state.car.carList.forEach((ele, i) => {
          if (ele.id == this.commodity.id) {
            this.flag = false;
            Toast.fail("请勿重复添加");
          }
        });
        if (this.flag) {
          this.$store.commit("SET_CARLIST", this.commodity);
          Toast.success("成功加入购物车");
        }
      } else {
        this.$store.commit("SET_CARLIST", this.commodity);
        Toast.success("成功加入购物车");
      }
    },
  },
};
</script>

<style scoped>

.add {
  flex: 2;
  background-color: #ea5235;
  color: #ffffff;
}
</style>
